【前端卡顿的优化思路和方案02】实现webpack的chunk文件的命名

webpack + es2015的import()语法进行code splitting时，需要指定chunk name，便于查看chunk具体是什么文件分离出的。

---

参考vue-router官方文档的 路由懒加载 部分

vue-router 路由懒加载

• 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
• 结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

一，import() 路由懒加载

• 首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：

const Login = () => Promise.resolve({ /* 组件定义对象 */ })

• 第二，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (split point)：

import('./Login.vue') // 返回 Promise

• 结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

const Login = () => import('./login.vue')

二，webpackChunkName 注释

• 有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Login = () => import(/* webpackChunkName: "Login" */ './login.vue')

• 然后就可以在vue-router中引用该组件

const routers = new Router({
    routes: [
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        ...

三，在webpack.base.conf.js 和 webpack.prod.conf.js 的 output 导出文件处修改设置

• 具体的修改位置是 filename 和 chunkFilename。如果没有之前的 webpackChunkName 的注释的设置，[name]就会使用数字，如1 ，2，3等来命名，数字应该是打包顺序，待定。有了注释的话，如 / webpackChunkName: "Login" /，[name] 就按照 Login 来命名。
• chunkFilename : 非入口(non-entry) chunk 文件的名称

【注意】webpack.base.conf.js 文件中的 output 修改，影响的是本地开发环境运行的chunk文件的名称，

【注意】webpack.prod.conf.js 中的修改，影响 通过 npm run build 打包后的chunk文件的名称。

• 初始的配置为

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js', // 打包后的文件名 1.js，
    ...

• 修改后的配置为

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].[hash].js',
    chunkFilename: '[name].chunk.[hash].js', //打包后的文件名 Login.chunk.2f8e6a3b7cd6aaa0d7ba.js
    ...

四，.babelrc 文件 中的 commits 不要设置成 false

• 该问题是一个隐藏的坑，webpack相关issue具体地址，仔细爬楼，后面有相关回应。以后如果用 TypeScript 写代码，里面也有相关的处理方案，此处不再赘述。
• 如下是一个总结

To sum up, make sure you set:

comments: true in .babalrc (this is the default)
chunkFilename: '[name].....' in your webpack config

If you are using typescript, also make sure:

removeComments: false under compilerOptions in tsconfig.json
module: esnext in tsconfig.json

• 具体代码位置，删除该行，webpack默认 comments 为 true

{
  "comments": false,
  ...

五，syntax-dynamic-import 插件处理 import()

如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。插件地址

• 首先安装插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

• 然后在.babelrc 文件中写如下配置

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

• 此外，该插件的实现还需要其他的一些babel插件才能使用，有关内容在babel7的升级文档中描述